---
type: integration
title: '@astrojs/alpinejs'
description: Aprenda a usar la integración de @astrojs/alpinejs para ampliar la compatibilidad de Alpinejs en tu proyecto de Astro.
githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/alpinejs/'
category: renderer
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'


Esta **[integración de Astro][astro-integration]** agrega [Alpine.js](https://alpinejs.dev/) a tu proyecto para que puedas usar Alpine.js en cualquier lugar de tu página.

## Instalación

Astro incluye un comando `astro add` para automatizar la configuración de las integraciones oficiales. Si lo prefieres, puedes [instalar las integraciones manualmente](#instalación-manual) en su lugar.

Para instalar `@astrojs/alpinejs`, ejecuta lo siguiente desde el directorio de tu proyecto y sigue las instrucciones:

<PackageManagerTabs>
  <Fragment slot="npm">
    ```sh
    npx astro add alpinejs
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```sh
    pnpm astro add alpinejs
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```sh
    yarn astro add alpinejs
    ```
  </Fragment>
</PackageManagerTabs>

Si tienes algún problema, [no dudes en informarnos en GitHub](https://github.com/withastro/astro/issues) y prueba los pasos de instalación manual a continuación.

### Instalación manual

Primero, instala el paquete `@astrojs/alpinejs`.

<PackageManagerTabs>
  <Fragment slot="npm">
    ```sh
    npm install @astrojs/alpinejs
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```sh
    pnpm add @astrojs/alpinejs
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```sh
    yarn add @astrojs/alpinejs
    ```
  </Fragment>
</PackageManagerTabs>

La mayoría de los gestores de paquetes también instalarán las dependencias asociadas. Sin embargo, si ves un aviso "No se puede encontrar el paquete 'alpinejs'" (o similar) al iniciar Astro, deberás instalar manualmente Alpine.js:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npm install alpinejs @types/alpinejs
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm add alpinejs @types/alpinejs
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn add alpinejs @types/alpinejs
  ```
  </Fragment>
</PackageManagerTabs>

Luego, aplica la integración a tu archivo `astro.config.*` usando la propiedad `integrations`:

```js ins="alpine()" title="astro.config.mjs" ins={2}
import { defineConfig } from 'astro/config';
import alpine from '@astrojs/alpinejs';

export default defineConfig({
  // ...
  integrations: [alpine()],
});
```

## Opciones de configuración

### `entrypoint`

Puedes extender Alpine estableciendo la opción `entrypoint` en un especificador de importación relativo a la raíz (por ejemplo, `entrypoint: "/src/entrypoint"`).

El export por defecto de este archivo debe ser una función que acepte una instancia de Alpine antes de iniciar. Esto permite el uso de directivas personalizadas, complementos y otras personalizaciones para casos de uso avanzados.

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import alpine from '@astrojs/alpinejs';

export default defineConfig({
  // ...
  integrations: [alpine({ entrypoint: '/src/entrypoint' })],
});
```

```js title="src/entrypoint.ts"
import type { Alpine } from 'alpinejs'
import intersect from '@alpinejs/intersect'

export default (Alpine: Alpine) => {
    Alpine.plugin(intersect)
}
```

## Uso

Una vez instalada la integración, puedes usar las directivas y la sintaxis de [Alpine.js](https://alpinejs.dev/) dentro de cualquier componente de Astro. El script de Alpine.js se agrega y habilita automáticamente en cada página de tu sitio web. Agrega scripts de complementos a la etiqueta `<head>` de la página.

El siguiente ejemplo agrega [el plugin Collapse de Alpine](https://alpinejs.dev/plugins/collapse) para expandir y contraer el texto del párrafo:

```astro title="src/pages/index.astro" ins={6} ins="x-collapse"
---
---
<html>
	<head>
		<!-- ... -->
		<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
	</head>
	<body>
    <!-- ... -->
		<div x-data="{ expanded: false }">
			<button @click="expanded = ! expanded">Toggle Content</button>
      
			<p id="foo" x-show="expanded" x-collapse>
        Lorem ipsum
			</p>
		</div>
	</body>
</html>
```

## Intellisense para TypeScript

La integración `@astrojs/alpine` agrega `Alpine` al objeto global de la ventana. Para el autocompletado del IDE, agrega lo siguiente a tu `src/env.d.ts`:

```ts title="src/env.d.ts"
interface Window {
  Alpine: import('alpinejs').Alpine;
}
```

## Ejemplos

* El [ejemplo Astro Alpine.js](https://github.com/withastro/astro/tree/latest/examples/framework-alpine) muestra como usar Alpine.js en un proyecto de Astro.

[astro-integration]: /es/guides/integrations-guide/

[astro-ui-frameworks]: /es/guides/framework-components/#usando-componente-de-framework
